<template>
  <view class="xh-pages-container"
    :style="{ '--theme-color': siteInfo.theme_color, '--theme-active-color': siteInfo.theme_active_color }">
    <!-- 头部导航 -->
    <u-navbar :leftIcon="navLeftIcon" :bgColor="navBgColor" :placeholder="true" @leftClick="hanldClickLeft" v-if="navBarText">
      <template #left>
        <view class="text-white">
          {{ navLeftText }}
        </view>
      </template>
      <template #center>
        <view class="text-white">
          {{ navBarText }}
        </view>
      </template>
    </u-navbar>
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <u-loading-icon :text="loadingText" :vertical="true" textSize="14"></u-loading-icon>
    </view>
    <slot v-else />
    <!-- 底部tabbar选项卡 -->
    <u-tabbar
    v-if="tabBar"
    v-bind="tabBarAttrs"
    :value="getCurrentRoute()"
    :activeColor="siteInfo.theme_active_color"
    >
      <u-tabbar-item v-for="(item, index) in tabbar" :key="index" :text="item.text" :name="item.path"
        @click="hanldTabBarClick">
        <template #active-icon>
          <image class="u-page__item__slot-icon" :src="item.iconActive" />
        </template>
        <template #inactive-icon>
          <image class="u-page__item__slot-icon" :src="item.iconPath" />
        </template>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script setup lang="ts">
import { useTabbar } from '@/stores/tabbar'
import { useSite } from '@/stores/site';

const props = withDefaults(defineProps<{
  // 是否显示底部
  tabBar?: boolean
  // 加载是否完成
  loading?: boolean
  // 加载文字
  loadingText?: string
  // 导航文字
  navBarText?: string,
  // 导航左侧文字
  navLeftText?: string,
  // 导航左侧图标
  navLeftIcon?: string
  // 导航栏背景色
  navBgColor?:string
}>(), {
  tabBar: false,
  loading: false,
  loadingText: '加载中',
  navBarText: '',
  navLeftText: '返回',
  navLeftIcon: '',
  navBgColor:'#ffffff',
});

const emit = defineEmits(['hanldClickLeft'])

// 站点信息
const siteInfo = storeToRefs(useSite()).siteInfo;

watchEffect(() => {
  if (siteInfo.value) {
    // 动态设置导航条颜色
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: siteInfo.value.theme_active_color
    });
  }
});

// 底部导航
const tabbar = storeToRefs(useTabbar()).tabbar;
const tabBarAttrs = storeToRefs(useTabbar()).tabBarAttrs;
const { getCurrentRoute, hanldTabBarClick } = useTabbar()

// 高度（暂时固定）
const tabBarHeight = ref('51px')

const navBarHeightVar = computed(() => {
  return props.navBarText ? '44px' : '0px';
})
const tabBarHeightVar = computed(() => {
  return props.tabBar ? tabBarHeight.value : '0px';
});


// 点击返回事件
const hanldClickLeft = () => { 
  emit('hanldClickLeft');
}

onLoad(() => {
  // 初始化tabbar
  if (props.tabBar) {
    useTabbar().initTabbar();
  }
});
</script>

<style lang="scss" scoped>
.xh-pages-container {
  height: calc(100vh - v-bind(tabBarHeightVar) - v-bind(navBarHeightVar) - var(--window-bottom));

  .loading {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.u-page__item__slot-icon {
  width: 50rpx;
  height: 50rpx;
}
</style>
